<template>
  <div class="bg-white dark:bg-zinc-900 xl:dark:bg-zinc-800 rounded pb-1">
    <div
      class="relative w-full rounded cursor-zoom-in group"
      :style="{ backgroundColor: randomColor() }"
      @click="onTOPinsClick"
    >
      <img
        ref="imgTarget"
        :src="data.photo"
        class="w-full rounded bg-transparent"
        :style="{
          height: (width / data.photoWidth) * data.photoHeight + 'px'
        }"
        v-lazy
      />
      <!-- 遮罩层四个按钮 -->
      <div
        class="hidden opacity-0 w-full h-full bg-zinc-900/30 absolute top-0 left-0 rounded duration-300 group-hover:opacity-100 xl:block"
      >
        <m-button class="absolute top-1.5 left-1.5" @click="onShareClick"
          >分享</m-button
        >
        <m-button
          class="absolute top-1.5 right-1.5"
          type="info"
          icon="heart"
          iconClass="fill-zinc-900 dark:fill-zinc-200"
        />
        <m-button
          class="absolute bottom-1.5 left-1.5 bg-zinc-100/70"
          type="info"
          size="small"
          icon="download"
          iconClass="fill-zinc-900 dark:fill-zinc-200"
          @click="onDownload()"
        />
        <m-button
          class="absolute bottom-1.5 right-1.5 bg-zinc-100/70"
          type="info"
          size="small"
          icon="full"
          iconClass="fill-zinc-900 dark:fill-zinc-200"
          @click="onImgFullScreen"
        />
      </div>
    </div>
    <!-- 标题 -->
    <p
      class="text-sm mt-1 font-bold text-zinc-900 dark:text-zinc-300 line-clamp-2 px-1"
      alt
    >
      {{ data.title }}
    </p>
    <!-- 作者 -->
    <div class="flex items-center mt-1 px-1">
      <img v-lazy class="h-2 w-2 rounded-full" :src="data.avatar" alt="" />
      <span class="text-sm text-zinc-500 ml-1">{{ data.author }}</span>
    </div>
  </div>
</template>

<script setup>
import { randomColor } from '@/utils/color'
import { saveAs } from 'file-saver'
import { message } from '@/libs'
import { computed, ref } from 'vue'
import { useFullscreen, useElementBounding } from '@vueuse/core'
import { weiboShare } from '@/utils/share.js'
const props = defineProps({
  data: {
    type: Object,
    required: true
  }
})
const emits = defineEmits(['click'])
const imgTarget = ref(null)
const { enter: onImgFullScreen } = useFullscreen(imgTarget)
const imgContainerCenter = () => {
  const {
    x: imgContainerX,
    y: imgContainerY,
    width: imgContainerWidth,
    height: imgContainerHeight
  } = imgTarget.value.getBoundingClientRect()
  return {
    translateX: parseInt(imgContainerX + imgContainerWidth / 2),
    translateY: parseInt(imgContainerY + imgContainerHeight / 2)
  }
}
const onTOPinsClick = () => {
  emits('click', {
    id: props.data.id,
    location: imgContainerCenter()
  })
}
const onDownload = () => {
  console.log(props.data.photoDownLink, props)
  message('success', '图片开始下载')
  // saveAs(
  //   props.data.photoDownLink,
  //   `${props.data.title} - 作者：${props.data.author}`
  // )
}
const onShareClick = () => {
  weiboShare(props.data.photo, `https://imooc-front.lgdsunday.club/pins/${props.data.id}`)
}
</script>

<style lang="scss" scoped></style>
